<template>
  <div class="page">
    <back-btn></back-btn>
    <div>
      <div class="item title-bar">
        <div>
          <!-- <div class="bar">
            <div class="title">{{data.name}}</div>
          </div> -->
          <div class="tab_bubble">
            <span class="bubble"></span>
            <span class="title">{{data.name}}</span>
          </div>
          <div class="item">
            <div class="desc stable">{{data.categoryName}}
              <span v-if="data.subCategoryName">/{{data.subCategoryName}}</span>
            </div>
          </div>
        </div>
        <button :class="isPraise?'button button-positive':'button positive border-positive button-clear'" @click="follow">{{isPraise?'已关注':'关注'}}</button>
      </div>
      <div class="tab-bar">
        <tab-bar :tabsData="list" :currentIndex="curIndex" @tabClick="tabSwitch" :isObject="true"></tab-bar>
      </div>
    </div>
    <div class="content scroll-wrap">
      <div class="tab-content">
        <!-- 概况 -->
        <div v-show="curIndex===0" class="p-0">
          <div class="list list-wrap" v-show="data.description||data.schoolingTime||data.degree">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>专业概况</h3>
            </div>
            <div class="item item-text-wrap">
              <div class="word" v-if="data.description">
                <span class="bold" style="display:inline;">培养目标：</span>
                <span class="text">{{data.description}}</span>
              </div>
              <div class="word" v-if="data.schoolingTime">
                <span class="bold">学制：</span>
                <span class="text">{{data.schoolingTime}}年</span>
              </div>
              <div class="word" v-if="data.degree">
                <span class="bold">学位授予：</span>
                <span class="text">{{data.degree}}</span>
              </div>
            </div>
          </div>
          <div class="list list-wrap" v-show="data.knowledge">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3 v-if="data.grade">{{data.grade.name==='专科'?'主要职业能力':'获得知识与能力'}}</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.knowledge}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.courses">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3 v-if="data.grade">{{data.grade.name==='专科'?'核心课程':'主要课程'}}</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.courses}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.practical">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3 v-if="data.grade">{{data.grade.name==='专科'?'实习实训':'实践教学'}}</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.practical}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.grade&&data.grade.name==='专科'&&data.jobQualificationCertificate">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>职业资格证书示例</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.jobQualificationCertificate}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.grade&&data.grade.name==='专科'&&data.inheritSecondaryVocational">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>衔接中职专业示例</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.inheritSecondaryVocational}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.grade&&data.grade.name==='专科'&&data.inheritUndergraduate">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3>接续本科专业示例</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.inheritUndergraduate}}
            </div>
          </div>
          <div class="list list-wrap" v-show="data.employment">
            <div class="item p-0">
              <div class="vertical-bar"></div>
              <h3 v-if="data.grade">{{data.grade.name==='专科'?'就业面向':'就业情况'}}</h3>
            </div>
            <div class="item item-text-wrap text">
              {{data.employment}}
            </div>
          </div>
        </div>
        <!-- 院校列表 -->
        <div v-if="curIndex===1&&!fromSchool">
          <div class="select">
            <div class="item">
              <div class="vertical-bar"></div>
              <h3 v-if="data.grade">考生信息</h3>
            </div>
            <com-select :data="selectList" :choiceIndex="selectIndex" @choice="selectSwitch"></com-select>
          </div>
          <div class="picker">
            <div v-for="(item,index) in pickerList" :key="index">
              <span>{{item.title}}</span>
              <div>
                <span v-for="(obj,i) in item.data" :key="i" :class="pickerIndex[index]===i?'badeg badge-positive':''" @click="pickerSwitch(index,i,obj)">{{obj.name}}</span>
              </div>
            </div>
          </div>
          <div class="stable totalCount" v-if="totalCount>0">{{province!=='不限省'?(province):''}}{{totalCount}}所学校</div>
          <div class="list school-list" v-if="listData.length>0">
            <nuxt-link :to="{name:'zhiyuan-school-detail',query:{collegeId:item.collegeId}}" tag="a" class="item item-card item-icon-right item-avatar-left item-stripe" v-for="(item,index) in listData" :key="index">
              <img :src="item.schoolBadge | imgResize(50,50)" />
              <div class="item-content">
                <h3>{{item.collegeName}}</h3>
                <span class="city">{{item.city}}</span>
                <span v-for="(level,i) in item.collegeLevelList" :key="i" class="stable">{{level.name}}</span>
                <span>{{item.collegeTypeName}}</span>
              </div>
              <div class="button positive border-positive button-clear">
                查看详情
              </div>
            </nuxt-link>
          </div>
          <no-content v-else :text="text"></no-content>
          <paginate :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
        </div>
        <!-- 评价 -->
        <div class="list relate" v-show="curIndex===2">
          <div class="list list-wrap">
            <div class="item item-text-wrap" v-for="(item,i) in data.evaluate" :key="i">
              <p class="bold">{{item.title}}</p>
              <p class="question">{{item.content}}</p>
            </div>
          </div>
        </div>
        <!-- 分数线 -->
        <div class="list relate" v-if="curIndex===commentIndex">
          <div class="item">
            <div class="vertical-bar"></div>
            <h3>专业分数线</h3>
          </div>
          <com-select :data="selectList" :choiceIndex="selectScoreIndex" @choice="selectSorceSwitch"></com-select>
          <table cellspacing="0" v-if="scoreLines.length>0">
            <colgroup>
              <col width="80">
              <col width="160">
              <col >
              <col width="100">
              <col width="100">
              <col width="100">
              <col width="120">
              <col width="120">
            </colgroup>
            <thead>
              <tr>
                <td v-for="(item,index) in tableTh" :key="index">{{item}}</td>
              </tr>
            </thead>
            <tbody v-for="(obj,index) in scoreLines" :key="index">
              <tr v-for="(item,i) in obj" :key="i">
                <td :rowspan="obj.length" :class="i>0?'none':''">{{item.year}}</td>
                <td>{{item.batch}}</td>
                <td>{{item.name}}</td>
                <td>{{item.maxScore}}</td>
                <td>{{item.minScore}}</td>
                <td>{{item.averageScore}}</td>
                <td>{{item.minRank}}</td>
                <td>{{item.enrollCount}}</td>
              </tr>
            </tbody>
          </table>
          <no-content :text="text"></no-content>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api, formatDate } from '@/utils'
import comSelect from '~/components/comSelect'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      isPraise: false,
      fromSchool: '',
      commentIndex: '',
      page: 1,
      list: [
        {
          name: '概况',
          index: 0
        }, {
          name: '开设院校',
          index: 1
        }, {
          name: '学生评价',
          index: 2
        }
      ],
      curIndex: 0,
      data: {},
      pickerList: [],
      pickerIndex: [0, 0, 0, 0],
      selectList: {},
      selectIndex: [0, 0, 0],
      selectScoreIndex: [0, 0],
      params: {},
      listData: [],
      tableTh: ['年份', '批次', '专业', '最高分', '最低分', '平均分', '最低位次', '录取数'],
      scoreLines: [],
      totalElements: 0,
      totalCount: 0,
      province: '',
      text: '正在加载数据...'
    }
  },
  methods: {
    follow () {
      this.$axios.get(api.zhiyuanSetFavorite, { params: { type: 2, id: this.params.majorId } }).then(data => {
        this.isPraise = !this.isPraise
      })
    },
    tabSwitch (i) {
      this.curIndex = i
      if (this.curIndex === 1 && this.commentIndex === '') {
        this.$axios.get(api.zhiyuanQueryCollegeCondition).then(data => {
          this.pickerList = []
          for (let x in data) {
            data[x].unshift({
              id: null,
              name: '不限'
            })
            let obj = {}
            data[x].forEach((item, index) => {
              if (item.id === undefined || item.id === null) {
                item.id = ''
              }
              switch (x) {
                case 'provinces':
                  item.type = 'provinceId'
                  obj.title = '学校地区'
                  obj.data = data[x]
                  break
                case 'collegeLevels':
                  item.type = 'collegeLevelId'
                  obj.title = '学校类型'
                  obj.data = data[x]
                  break
                case 'collegeTypes':
                  item.type = 'collegeTypeId'
                  obj.title = '学校性质'
                  obj.data = data[x]
                  break
                case 'grades':
                  item.type = 'gradeId'
                  obj.title = '学校要求'
                  console.log(data[x])
                  obj.data = data[x]
                  break
              }
              if (index === 0) {
                this.params[item.type] = item.id
              }
            })
            this.pickerList.push(obj)
          }
        })
        this.getData(this.params)
      }
    },
    pickerSwitch (index, i, item) {
      this.pickerIndex.splice(index, 1, i)
      if (index === 0) {
        this.province = `${item.name}省`
      }
      this.params[item.type] = item.id
      this.params.page = 0
      this.page = 1
      this.getData(this.params)
    },
    // 院校下拉框
    selectSwitch (obj, index) {
      switch (index) {
        case 0:
          this.params.stuProvince = obj.id
          break
        case 1:
          this.params.scienceAndArt = obj.id
          break
        case 2:
          this.params.year = obj.id
          break
      }
      this.page = 1
      this.params.page = 0
      this.getData(this.params)
    },
    // 分数线下拉框
    selectSorceSwitch (obj, index) {
      switch (index) {
        case 0:
          this.params.provinceId = obj.id
          break
        case 1:
          this.params.scienceAndArt = obj.id
          break
      }
      this.getSorce(this.params)
    },
    // 获取院校列表
    getData () {
      let params = this.params
      for (let index in params) {
        if (params[index].length === 0) {
          delete params[index]
        }
      }
      this.$axios.get(api.zhiyuanQueryCollegeMajorScoreLine, { params: params }).then(data => {
        if (data.content.length > 0) {
          this.listData = data.content
          this.totalElements = data.totalElements
          this.text = ''
          // if (!params.collegeLevelId && !params.collegeTypeId && !params.provinceId && !params.subjectId) {
          this.totalCount = data.totalElements
          // }
        } else {
          this.listData = []
          this.totalElements = 0
          this.totalCount = 0
          this.text = '暂无数据'
        }
      })
      console.log(this.totalCount)
    },
    // 获取分数线数据
    getSorce (params) {
      this.$axios.get(api.zhiyuanQueryFilterCollegeMajorScoreLine, { params: params }).then(data => {
        if (data.length > 0) {
          this.text = ''
          this.scoreLines = data
        } else {
          this.scoreLines = []
          this.text = '暂无数据'
        }
      })
    },
    // 分页
    pagechange (currentPage) {
      this.page = currentPage
      this.params.page = currentPage - 1
      this.getData(this.params)
    }
  },
  components: {
    comSelect
  },
  beforeMount () {
    this.curIndex = 0
    let majorId = this.$route.query.id
    this.fromSchool = this.$route.query.fromSchool
    let collegeId = this.$route.query.collegeId
    let userInfo = this.$store.state.userInfo
    console.log(userInfo)
    let provinces = userInfo.province.id
    // let year = userInfo.startYear
    // 如果是从院校过来的就显示分数线
    if (this.fromSchool) {
      this.params = {
        majorId: majorId,
        scienceAndArt: '理科',
        provinceId: provinces,
        collegeId: collegeId
      }
      this.commentIndex = 1
      this.list = [
        {
          name: '概况',
          index: 0
        }, {
          name: '分数线',
          index: 1
        }
      ]
      this.getSorce(this.params)
    } else {
      this.params = {
        majorId: majorId,
        year: 2019,
        stuProvince: provinces,
        scienceAndArt: '理科',
        page: 0,
        size: 15
      }
    }
    // 获取下拉框筛选值
    this.$axios.get(api.zhiyuanQueryScoreCondition).then(data => {
      let _a = []
      data.scienceAndArt.forEach((item, index) => {
        let _aa = {}
        _aa.id = item
        _aa.name = item
        _a.push(_aa)
      })
      data.scienceAndArt = _a
      if (!this.fromSchool) {
        // let _date = new Date()
        // let _month = _date.getMonth() + 1

        // let _year = formatDate(new Date(), 'yyyy')
        // if (_month < 7) {
        //   _year = _year - 1
        // }
        let year = []
        for (let i = 0; i < 4; i++) {
          year.push({ id: `${formatDate(new Date(), 'yyyy') - i}`, name: formatDate(new Date(), 'yyyy') - i })
          // year.push({ id: `${_year - i}`, name: _year - i })
        }
        data['year'] = year
      }
      this.selectList = data
      // 根据用户信息更改下拉框默认索引值
      let userProvinces = this.lodash.findIndex(this.selectList.provinces, (item) => {
        return item.id === provinces
      })
      // let userYear = this.lodash.findIndex(this.selectList.year, (item) => {
      //   return item.id === year
      // })
      if (this.fromSchool) {
        this.selectScoreIndex.splice(0, 1, userProvinces)
      } else {
        this.selectIndex.splice(0, 1, userProvinces)
        // this.selectIndex.splice(2, 1, userYear)
      }
    })
    // 获取专业详情
    this.$axios.get(api.zhiyuanQueryMajor, { params: { id: this.params.majorId } }).then(data => {
      if (data) {
        if (data.major.evaluate) {
          data.major.evaluate = JSON.parse(data.major.evaluate)
        } else if (!this.fromSchool) {
          this.list = [
            {
              name: '概况',
              index: 0
            }, {
              name: '开设院校',
              index: 1
            }
          ]
        }
        this.data = data.major
        this.isPraise = data.isPraise
      } else {
        this.data = {}
      }
    })
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .select {
    > div {
      margin-right: 20px;
    }
  }
  .title-bar {
    justify-content: space-between;
    border-bottom: 1px solid $stable-ec;
    padding: 10px 25px;
    align-items: center;
    // .bar {
    //   margin-right: 10px;
    //   ~ div {
    //     padding: 0;
    //   }
    // }
    .tab_bubble {
      margin-bottom: 0 !important;
    }
    > div:last-child {
      justify-content: space-between;
      flex: 1;
    }
    .sub {
      margin-right: 5px;
    }
    .chooce {
      margin-left: 10px;
    }
  }
  /deep/ .select {
    display: flex;
    margin: 10px 0;
    align-items: center;
  }
  .content {
    position: relative;
    flex: 1;
    // overflow-y: auto;
    .totalCount {
      margin-top: 20px;
    }
    .school-list {
      margin-top: 25px;
      .item {
        &-stripe {
          margin: 0 -20px;
        }
        h3 {
          margin-bottom: 8px;
        }
        &-content {
          > span {
            margin-right: 8px;
          }
          .city {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
.p-0 {
  .list {
    margin-bottom: 15px;
    .item {
      padding: 0;
    }
  }
}
.relate {
  > .item {
    margin-bottom: 10px;
  }
}
.question {
  margin-top: 10px;
}
.relate {
  .item {
    padding: 12px 0;
  }
}
</style>
